<template>
  <section class="container">
    <!-- 面包屑导航条 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>酒店</el-breadcrumb-item>
        <el-breadcrumb-item>{{cityName}}酒店预订</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 搜索栏 -->
    <searchBar :defaultValue="{cityName, ...searchParams }" :onChange="handleSearchSubmit" class="hotel-search-bar" />

    <!-- 可选搜索条件 -->
    <el-row type="flex" :gutter="10" class="hotel-option-row" >
      <el-col :span="14" >
        <searchOptions :defaultValue="searchParams.scenic" :scenics="cityData.scenics" :onClick="handleOptionClick" 
        v-if="cityData"/>
      </el-col>
      <el-col :span="10">
        <mapView :value="hotels.data" width="420" height="260" @handleSearchSubmit="handleSearchSubmit"/>
      </el-col>
    </el-row>

    <!-- 列表条件过滤器 -->
    <listFilter
      :topPrice="4000"
      :defaultValue="searchParams"
      :hotelOptions="hotelOptions"
      :onChange="handleFiltersChange"
      @handleSearch="handleSearchSubmit"
    />

    <!-- 搜索结果列表展示 -->
    <div class="hotel-list" v-if="loaded">
      <div class="no-result" v-if="hotels.total === 0">
        暂无符合条件的酒店
      </div>
      <div v-else>
        <itemView v-for="item in hotels.data" :key="item.id" :dataSource="item"/>
        <div class="pagination-box" v-if="totalPages > 0">
          <Pagination :defaultValue="searchParams.page" :total="totalPages" :onChange="handlePageChange" />
        </div>
        </div>
      <!-- </div> -->
    </div>
    <div class="hotel-list-loading" v-else>
      <img src="/images/loading.gif" alt="loading">
    </div>
  </section>
</template>

<script>
  import _omit from 'lodash/omit'
  import _pickBy from 'lodash/pickBy'
  import _isEmpty from 'lodash/isEmpty'
  import searchBar from "@/components/hotel/searchBar";
  import searchOptions from "@/components/hotel/searchOptions";
  import mapView from "@/components/hotel/mapView";
  import listFilter from "@/components/hotel/listFilter";
  import itemView from "@/components/hotel/itemView";
  import Pagination from "@/components/hotel/Pagination";


  function parseQueryString(params) {
    let qs = ''
    for (let key in params) {
      if (params.hasOwnProperty(key)) {
        let v = params[key]
        if (Array.isArray(v)) {
          v.forEach(x => {
            if (x) {
              qs += `&${key}_in=${x}`
            }
          })
        } else {
          if(v) qs += `&${key}=${v}`
        }
      }
    }
    return qs ? `?${qs}` : qs
  }

  export default {
    data() {
      return {
        loaded: false,
        cityData: null,
        cityName: this.$route.query.cityName || '',
        searchParams: {
          //_limit: 5,
          // city: 73,
          //price_lt: 4000,
          ...this.$route.query,
        },
        hotels: {},
        hotelOptions: {},
      }
    },

    watch: {
      searchParams: {
        deep: true,
        handler(value, oldValue){
          //console.log(value, oldValue)
        }
      }
    },

    mounted: async function () {

      setTimeout(() => {
        if(this.cityName){
          this.handleSearchSubmit(this.searchParams)
        }
      }, 0)
      
      const res = await this.$axios({url: '/hotels/options'})
      const data = res.data.data
      const hotelOptions = {}
      for (let key in data) {
        if (data.hasOwnProperty(key)) {
          hotelOptions[key] = data[key].map(d => ({value: d.id, label: d.name}))
        }
      }
      this.hotelOptions = hotelOptions
    },

    components: {
      searchBar,
      searchOptions,
      mapView,
      listFilter,
      itemView,
      Pagination,
    },

    methods: {
      getCityData(name) {
        return this.$axios({url: '/cities', params: {name}})
      },
      async handleSearchSubmit(searchParams = {}) {
        const {cityName, ...othersParams} = searchParams;
        const params = {...this.searchParams, ...othersParams}
        const {page = 1} = params
        this.searchParams = _omit(params, ['adultCount', 'childCount', 'cityName'])

        this.loaded = false
        this.hotels = {}

        this.cityName = cityName;

        if (this.cityName ) {
          const {data: {data: [cityData]}} = await this.getCityData(this.cityName )
          this.cityData = cityData
          this.searchParams.city = cityData.id
          this.cityName = cityData.name
        }

        // 更新城市数据
        if(this.cityName && this.cityName != this.$store.state.hotel.city){
          this.$store.commit("hotel/setCity", this.cityName);
        }

        const {city, ...paramsProps} = this.searchParams;
        paramsProps.cityName = this.cityName;

        // 在URL上添加/替换参数
        this.$router.replace({
          path: 'hotel',
          query: _pickBy(paramsProps, v => v && v.toString().length > 0)
        })

        // URL上显示page，而请求参数改成index
        const qsParams = _omit(this.searchParams, 'page')
        const qs = parseQueryString({...qsParams, _start: (page - 1) * 5})
        // 根据新的过滤条件获取新数据
        const res = await this.$axios({
          url: `/hotels${qs}`,
        })

        this.hotels = res.data
        if (res.data.total) {
          this.locationList = res.data.data[0].location
        }

        this.loaded = true
      },
      handleFiltersChange(filters) {
        this.handleSearchSubmit(filters)
      },
      handlePageChange(page) {
        this.handleSearchSubmit({page})
      },
      handleOptionClick(location) {
        const {id} = location || {}
        this.handleSearchSubmit({scenic: id})
      },
    },

    computed: {
      totalPages() {
        return Math.ceil(this.hotels.total / 5)
      },
    }
  }
</script>

<style scoped lang="less">
  .container {
    width: 1000px;
    margin: 0 auto;

    .breadcrumb {
      overflow: hidden;
      padding: 20px 0;
    }
    .hotel-option-row {
      min-height: 260px;
      margin-bottom: 20px;
    }

    .pagination-box {
      display: flex;
      justify-content: flex-end;
      padding: 20px 0 40px 0;
    }

    .no-result,
    .hotel-list-loading {
      text-align: center;
      height: 300px;
      margin-top: 20px;
    }
  }
</style>
